<template>
  <view class="list">
    <ScrollBar>
      <view class="list-item" v-for="(item, index) in 20">
        <view class="f-bold list-item-left">{{ randomFont() }}</view>
        <view class="list-item-right">
          <view class="f-bold list-item-title fs-20">
            <text class="m-r-5">拼音:</text>
          <text class="pin-yin">{{ pinYin('汉', "tone",
            "poly")
          }}</text>
          </view>
          <view class="f-bold list-item-title fs-20">
            <text class="m-r-5">部首:</text><text class="m-r-30 bu-shou">{{ getPP() }}</text>
            <text class="m-r-5">笔数:</text><text class="bi-shu">{{ fontHasStep('嘿') }}</text>
          </view>
          <view class="f-bold list-item-title fs-20"><text class="m-r-5">释义:</text><text class="shi-yi">速度发货及时答复</text></view>
        </view>
      </view>
    </ScrollBar>
  </view>
</template>

<script setup>
import ScrollBar from "../../components/ScrollBar/index.vue";
import { pinYin, randomFont, fontPP, fontHasStep } from '@/utils/font.js'

function getPP() {

  const [data] = fontPP('嘿')
  return data.radical
}
</script>
<style lang="scss">
.pin-yin {
  color: #008B45;
}

.bu-shou {
  color: #458B74;
}

.bi-shu {
  color: #FFC125;
}

.shi-yi {
  color:#4F4F4F;
}

.list {
  position: relative;
  height: 100%;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-self: center;
  border-bottom: 1px solid #cbd5e1;

  &-left {
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 6px;

    .list-item-title {
      color: #334155;
    }
  }
}

.list-item:nth-child(1) {
  padding-top: 48px;
}

.list-item:last-child {
  padding-bottom: 40px;
}</style>
